import React from 'react';

// const index_today = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_today.png');

export default class ImageLazy extends React.Component{
  render() {
    const {src,style} = this.props;
    let bgStyle={
      backgroundImage:"url(https://dummyimage.com/750x300/b293a4/fff&text='loading..!')",
      backgroundSize:"100%",
      backgroundRepeat:'no-repeat',
      display:'inline-block'
    };
    let mystyle = $.extend({},bgStyle,this.props.style)
    return (
      <span ref='span' className={this.props.className} style={mystyle}>
        <img ref="image" src={src} onLoad={this.handleImageLoaded.bind(this)} style={$.extend({transition:'all .4s ease',opacity:0},style)} />
      </span>
    )
  }
  handleImageLoaded() {
    this.refs['span'].style.background = 'none'
    this.refs['image'].style.opacity=1;
  }
}
